<template>
  <div class="recommend" ref="recommend">
    <scroll :data="dissList" class="diss-content" ref="refScroll">
      <div>
        <div class="slider-wrapper">
          <slider v-if="sliderData.length > 0">
            <div v-for="item in sliderData" :key="item.id" >
              <a :href="item.linkUrl">
                <img @load.once="imgLoad" :src="item.picUrl">
              </a>
            </div>
          </slider>
        </div>
        <div class="recommend-list">
          <div class="list-title">热门歌曲推荐</div>
          <ul>
            <li @click="selectItem(item)" v-for="item in dissList" :key="item.dissid" class="diss-item">
              <div class="item-left">
                <img width="60" height="60" v-lazy="item.imgurl">
              </div>
              <div class="item-right">
                <h1 v-html="item.creator.name" class="title"></h1>
                <p v-html="item.dissname" class="text"></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </scroll>
    <div class="loading-container" v-if="!dissList.length">
      <loading></loading>
    </div>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
import { getRecommend, getDissList } from '@/api/recommend.js'
import { ERR_OK } from '@/api/config.js'
import Slider from '@/base/slider/slider'
import Scroll from '@/base/scroll/scroll'
import Loading from '@/base/loading/loading'
import { playlistMixin } from 'common/js/mixin'
import { mapMutations } from 'vuex'
import * as types from '@/store/mutations-types'

export default {
  mixins: [ playlistMixin ],
  data() {
    return {
      sliderData: [],
      dissList: []
    }
  },
  components: {
    Loading,
    Slider,
    Scroll
  },
  methods: {
    selectItem(item) {
      this.setDisc(item)
      this.$router.push('/recommend/' + item.dissid)
    },
    handlePlaylist(newList) {
      let bottom = newList.length > 0 ? '60px' : '0px'
      this.$refs.recommend.style.bottom = bottom
      this.$refs.refScroll.refresh()
    },
    ...mapMutations({
      setDisc: types.SET_DISC
    }),
    _getRecommendData() {
      getRecommend().then((resp) => {
        if (resp.code === ERR_OK) {
          this.sliderData = resp.data.slider
        }
      })
    },
    _getDissList() {
      getDissList().then((resp) => {
        const jsonData = resp.data
        if (jsonData.code === ERR_OK) {
          this.dissList = jsonData.data.list
        }
      })
    },
    imgLoad() {
      if (!this.imgLoadFlag) {
        this.$refs.refScroll.refresh()
        this.imgLoadFlag = true
      }
    }
  },
  created() {
    setTimeout(() => {
      this._getRecommendData() // 获取slider数据
      this._getDissList() // 推荐歌单列表
    }, 200)
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"

.recommend
  position: fixed
  width: 100%
  top: 88px
  bottom: 0
  .diss-content
    overflow: hidden
    height: 100%
    .slider-wrapper
      width: 100%
      overflow: hidden
    .recommend-list
      .list-title
        height: 45px
        line-height: 45px
        text-align: center
        font-size: $font-size-medium
        color: $color-theme
      .diss-item
        display: flex
        box-sizing: border-box
        align-items: center // flex布局的垂直居中
        padding: 0 20px 20px 20px
        .item-left
          flex: 0 0 60px
          width: 60px // 为了兼容性，同时设置 flex第三个属性和 width属性
          padding-right: 20px
        .item-right
          flex: 1
          display: flex
          flex-direction: column
          justify-content: center
          line-height: 20px
          overflow: hidden
          font-size: $font-size-medium
          .title
            margin-bottom: 10px
          .text
            color: $color-text-d
  .loading-container
    position: absolute
    width: 100%
    top: 50%  // 视窗垂直中心
    transform: translateY(-50%) //垂直向上偏移50% 自己的高度

</style>
